<!-- 输入框 -->
<script setup>
// #导出vue方法
import { ref, defineProps, defineEmits, computed } from "vue";
import RulesCheck from "./rules-check.js";
// -------------------------------------------------------------------
const props = defineProps({
	// 表头
	label: String,
	// 绑定值
	modelValue: String,
	// 提示
	placeholder: String,
	// 警告文本
	warningTxt: String,
	// 规则
	rules: Array,
});

const emit = defineEmits(["update:modelValue"]);

const updateValue = (value) => {
	emit("update:modelValue", value);
};

const mValue = computed(() => props.modelValue);
// 规则检查
const { iserr } = RulesCheck({
	rules: props.rules,
	modelValue: mValue,
});
</script>

<template>
	<div class="form-row">
		<div class="row-label">
			{{ label }}
		</div>

		<div class="row-content">
			<div class="row-com">
				<div class="form-input">
					<input
						:value="modelValue"
						:placeholder="placeholder"
						@input="updateValue($event.target.value)"
					/>
				</div>
			</div>

			<!-- 警告信息 -->
			<div class="warning" v-if="iserr">
				<span>*</span>
				<span>{{ warningTxt }}</span>
			</div>
		</div>
	</div>
</template>

<style scoped lang="less">
.form-input {
	width: 100%;

	input {
		width: 100%;
		height: 100%;

		font-size: 30px;
		color: #333333;

		background-color: transparent;
		border: none;
		outline: none;
	}
}
</style>
